<template>
  <div class="entrySchoolForm">
    <div class="form-operate">
      <!--<div class="form-filter">
        <div class="form-filter-search">
          <el-input
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="search"
          >
          </el-input>
          <el-button type="primary" v-on:click="searchTable">搜索</el-button>
        </div>
      </div>-->
      <div class="operate-right">
        <el-button type="primary" v-on:click="addOpenDay">设置隔离</el-button>
        <el-button type="danger " v-on:click="save">新增</el-button>
      </div>
    </div>
    <div class="huadi-table">
      <el-table
        v-loading=""
        ref="multipleTable"
        tooltip-effect="dark"
        :data="ctableData"
        :header-row-style=headerStyle
        style="width: 100%">
        <el-table-column  width="150"
          prop="suppilercode"
          label="供应商代码"
          header-align="center"
        >
        </el-table-column>
        <el-table-column width="150"
          prop="dc"
          header-align="center"
          label="DC信息">
        </el-table-column>

        <el-table-column width="200"
          prop="ljcode"
          header-align="center"
          label="09条码">
        </el-table-column>

        <el-table-column width="150"
          prop="batch"
          header-align="center"
		      label="LOT信息（批次）">
        </el-table-column>

        <el-table-column width="250"
          prop="recivetime"
          header-align="center"
          label="收货日期">
        </el-table-column>

        <el-table-column width="150"
          prop="po"
          header-align="center"
          label="PO">
        </el-table-column>

        <el-table-column width="150"
            prop="xh"
            header-align="center"
            label="箱号">
        </el-table-column>

        <el-table-column width="150"
            prop="wlbb"
            header-align="center"
            label="物料版本">
        </el-table-column>

        <el-table-column width="150"
            prop="mxh"
            header-align="center"
            label="模穴号">
        </el-table-column>

        <el-table-column width="200"
          prop="wxtsbq"
          header-align="center"
          label="外箱特殊标签(改善品等类)">
        </el-table-column>

        <el-table-column width="200"
          prop="state"
          header-align="center"
          label="是否锁定">
        </el-table-column>
        <el-table-column
          width="200"
          header-align="center"
          label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini" type="success" @click="handleEdit(scope.row)"
            >
              编辑
            </el-button>
            <!-- <el-button size="mini" type="success"
			@click="details(scope.row)">查看</el-button>
           <el-button
              type="primary"
              size="mini"
              @click="sqc(scope.row)">生成二维码</el-button>-->
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        layout="prev, pager, next"
        :total=page.total
        :pageSize=page.pageSize
        @current-change="handleCurrentChange"
      >
      </el-pagination>
      <el-dialog
        title=""
        :visible.sync="centerDialogVisible"
        width="280px"
        center>
        <el-card :body-style="{ display:'flex','justify-content': 'center','align-items':'center'}">
          <img v-bind:src="imageUrl" class="image">
        </el-card>
        <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
      </el-dialog>
    </div>
  </div>

</template>

<script>
  export default {
    name: 'OpenDayActivityForm',
    data () {
      return {
        centerDialogVisible:false,
        imageUrl:"",
          tableSelect:[],
          filter:-1,
          search:"",
        headerStyle: {
          "background-color": '#f5f6fa',
        },
        page: {
          total: 0,
          pageIndex: 0,
          pageSize: 5
        },
        dialogFormState: false,
        dialogFormStateAll:false,
        stateform: {
          id: '',
          state: 0,
          memo: '',
          // false 为不是批量的，true 为批量
          type:false
        },
        tableData: [],
        form: {
          selector: ""
        },
        loading: true
      }
    },
    methods: {
    save(){
        this.$store.commit('clearEnroll');
      	this.$router.push('OpenDayActivityEdit');
    },
		addOpenDay(){
			this.$router.push('OpenDayEntryEdit');
		},
      handleEdit(row){
		    this.$store.commit('enrollUpdate',row);
		    this.$router.push("/OpenDayActivityEdit");
      },
      handleDelete(row){
        this.$http.get('/record/delete?id='+row.id).then(response => {
          if(response.bodyText=='true'){
            this.pageUtil();
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success'
            });
          }else{
            this.$message('删除失败');
          }
        }, response => {
          this.$message('网络错误');
        });
      },
        searchTable(){
          this.page.pageIndex=0;
            this.pageUtil();
        },
      details(row){
        this.$router.push({path:'OpenDayEntryForm',query:{activityId:row.id,name:row.activityName}});
      },
        pageUtil(){
          this.$http.get('/record/QueryPage?page='+this.page.pageIndex+'&pageSize='+this.page.pageSize).then(response => {
            console.log(response);
            //return;
            this.tableData = response.body.data;
            console.log(this.tableData);
            this.page.total=response.body.total;
          }, response => {
            this.$message('网络错误');
          });
        },
      handleCurrentChange(val) {
          this.page.pageIndex=val-1;
          this.pageUtil();
      },
      sqc(row){
          this.centerDialogVisible=true;
          this.imageUrl="/Hd-NurseryShool/activity/getRqCode?activeId="+row.id;
      }
    },
    computed: {
      ctableData(){
        this.tableData.forEach(function(item){
          item.recivetime=new Date(item.recivetime).pattern('yyyy-MM-dd HH:mm:ss');
          if(item.state=='0'){
            item.state="否";
          }else{
            item.state="是";
          }
          //item.startTime=new Date(item.startTime).pattern('yyyy-MM-dd');
         // item.endTime=new Date(item.endTime).pattern('yyyy-MM-dd');
        })
        return this.tableData;
      }
    },
    created(){
      this.page.pageIndex=0;
		  this.pageUtil();
		  this.$store.commit("update", [{name: '日常工作', router:
		  '/OpenDayEntryForm'},
			{name: '隔离条件', router: '/OpenDayEntryForm'}]);
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .pagination, el-pagination {
    margin-top: 24px;
    width: 500px;
    padding: 0px !important;
  }

  .huadi-table {
    margin-top: 25px;
    text-align: center;
  }

  .operate-right {
    width: 200px;
    /*width:300px;*/
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-left: 20px;
  }
  .marginDia{
    height:20px;
    width:100%;
  }

  .stata-dialog > .form-item{
    margin-top:20px;
  }
  .form-filter-search{
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
  }

  .el-input {
    width: 200px;
    margin-right:10px;
  }

  .entrySchoolForm {
    width: 100%;
    heigth: 100%;
    background: #eaedf1;
  }

  .form-operate {
    height: 70px;
    width: 100%;
    border-radius: 3px;
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .form-filter {
    height: 100%;
    padding-left: 10px;
    width: 550px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .form-filter-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .el-form {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .el-form-item {
    margin-bottom: 0;
  }

</style>
